<template>
	<view v-if="loaded" :id="templateId">
		<empty
			v-if="loadingType !== 'loading' && !goodsList.length"
			:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			:desc="emptyDesc"
			:showBtn="true"
			size="large"
		></empty>

		<template v-else>
			<view class="goods-wrap">
				<view v-for="(item, index) in goodsList" :key="index">
					<uni-m-goods-col
						:routeLink="
							(item.isEffective === 1 &&
								`/pages/common/pages/goods/goodsDetail?goodsId=${item.goodsId}`) ||
								''
						"
						:goods="item"
						:goodsPrice="item.priceStr.split('.')"
						:goodsStatusText="
							(item.isEffective === 0 && '商品已下架') || ''
						"
					>
						<template slot="metaRight">
							<button
								v-if="item.isEffective === 0"
								@click="delCutGoodsItem(index)"
								:style="themeStyles.btnGhostColor"
								class="del-btn"
							>
								删除
							</button>
							<view class="goods-num" v-else
								>{{ item.browse }}人想买</view
							>
						</template>
					</uni-m-goods-col>
				</view>
			</view>
			<uni-load-more :status="loadingType"> </uni-load-more>
		</template>
	</view>
</template>

<script>
/** api begin */
// 收藏
import {
	queryGoodsCollectList,
	updateGoodsCollect,
	deleteGoodsCollect
} from "@/lib/api/interestedServer/goodsCollect";

// 浏览记录
import {
	queryGoodsBrowseList,
	deleteGoodsBrowse
} from "@/lib/api/interestedServer/goodsBrowse";
/** api end */

/** components begin */
import uniMGoodsCol from "@/components/goods/uniMGoodsCol";
import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import empty from "@/components/empty";
/** components end */

let currentPage = 1;
export default {
	components: {
		empty,
		uniMGoodsCol,
		uniLoadMore
	},
	data() {
		return {
			emptyDesc: "",
			goodsList: [],
			pageType: "" // 1101: 浏览历史, 1102: 我的收藏
		};
	},

	onLoad(option) {
		currentPage = 1;
		this.pageType = (option.pageType && option.pageType) || "";
		this.setPageTitle();
		this.getGoodsList();
	},

	//下拉刷新
	onPullDownRefresh() {
		currentPage = 1;
		this.getGoodsList();
	},

	// 上拉加载
	onReachBottom() {
		if (this.loadingType === "more") {
			currentPage++;
			console.log("currentPage", currentPage);
			this.getGoodsList();
		}
	},

	methods: {
		setPageTitle(pageType) {
			let title = "";
			switch (this.pageType) {
				case "1101":
					title = "浏览历史";
					this.emptyDesc = "浏览记录";
					break;
				case "1102":
					title = "我的收藏";
					this.emptyDesc = "收藏夹";
					break;

				default:
					break;
			}
			uni.setNavigationBarTitle({
				title
			});
		},

		async delCutGoodsItem(index) {
			const id = this.goodsList[index].id;
			try {
				await this.getDelPagaTypeGoodsItemFn(id);
				this.$api.showToast("成功删除~");
				this.goodsList.splice(index, 1);
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async getGoodsList() {
			this.loadingType = "loading";
			console.log("currentPage", currentPage);
			try {
				const res = await this.getQueryPagaTypeGoodsListFn(currentPage);
				console.log("res", res);
				if (currentPage === 1) {
					this.goodsList = res.data.list;
				} else {
					this.goodsList = this.goodsList.concat(res.data.list);
				}
				const noMore = this.goodsList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";
				this.loaded = true;
				uni.stopPullDownRefresh();
			} catch (error) {
				console.log("error", error);
				uni.stopPullDownRefresh();
				await this.$api(error.resultInfo || "出错了* _ *");
				uni.navigateBack();
			}
		},

		async getDelPagaTypeGoodsItemFn(id) {
			if (this.pageType === "1101") {
				return await deleteGoodsBrowse({ id });
			} else {
				return await deleteGoodsCollect({ id });
			}
		},

		async getQueryPagaTypeGoodsListFn(currentPage) {
			if (this.pageType === "1101") {
				return await queryGoodsBrowseList({ currentPage });
			} else {
				return await queryGoodsCollectList({ currentPage });
			}
		},

		delCurrentHistory(index) {
			this.goodsList.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-wrap {
	margin: 24rpx 24rpx 0;
	.del-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 96rpx;
		height: 50rpx;
		border-radius: 24rpx;
		border: 2rpx solid;
		font-size: 24rpx;
	}
	.goods-num {
		font-size: $theme-size-small-base;
		color: $theme-color-ghost-base;
	}
}
</style>